<template>

  <div class="homeDetail">

    <div class="tabr-nav-title">
       <van-nav-bar
        :title="title"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="homeHeader">

      <div class="homeHeader-left">

        <div v-if="state.detailData?.districtName" class="item">
           <van-button color="#1989fa" size="mini">{{
            state.detailData?.districtName
          }}</van-button
          >
        </div>

        <div class="item">
           <van-button
            :color="
              status == 3 ? '#1989fa' : status == 2 ? '#08c33b' : '#ee7e34'
            "
            plain
            size="mini"
            > {{
              status == 0
                ? '未到场'
                : status == 1
                  ? '处置中'
                  : status == 2
                    ? '待审核'
                    : status == 3
                      ? '已办结'
                      : '-'
            }}</van-button
          >
        </div>

        <div class="item" v-if="state.detailData?.isDrill == 1">
           <van-button color="#08c33b" plain size="mini"> 演练</van-button>
        </div>

        <div class="item" v-if="state.detailData?.workType == 2">
           <van-button color="#ff1c1c" plain size="mini"> 增援</van-button>
        </div>

      </div>
       <!-- <div>
         <van-button type="success" size="mini" @click="goLine"
          >单兵连线</van-button
        >
      </div> -->
    </div>

    <div
      class="cardList"
      :style="{
        height:
          status == 0 || status == 1
            ? 'calc(100vh - 190px)'
            : 'calc(100vh - 120px)',
      }"
    >

      <div class="listItem">

        <div class="list">

          <div class="left">工单编号：</div>

          <div class="right">{{ state.detailData?.code }}</div>

        </div>

        <div class="list">

          <div class="left">风险点:</div>

          <div class="right">{{ state.detailData?.riskPoint }}</div>

        </div>

        <div class="list">

          <div class="left">事件来源:</div>

          <div class="right"> {{ getName() }} </div>

        </div>

        <div class="list">

          <div class="left">详细地址：</div>

          <div class="right"> {{ state.detailData?.riskPointAddress }} </div>

        </div>

        <div class="list">

          <div class="left">所在区县:</div>

          <div class="right">{{ state.detailData?.districtName }}</div>

        </div>

        <div class="list">

          <div class="left">所在街道:</div>

          <div class="right">{{ state.detailData?.streetName }}</div>

        </div>

      </div>

      <div class="listItem" v-if="status > 0">

        <div class="title">
           <van-icon name="arrow" /> 到场时间 {{
            state.detailData?.arrivalTime
              ? new Date(state.detailData?.arrivalTime).toLocaleString()
              : '-'
          }}
        </div>

        <div
          class="list"
          style="flex-direction: column; align-items: flex-start"
        >

          <div class="left">到场照片:</div>

          <div class="right">
             <van-grid :border="false" :column-num="3"
              > <van-grid-item
                v-for="(item, index) in state.detailData?.presentPhotos"
                :key="index"
                > <van-image
                  :src="item.previewUri"
                  @click="showImagePreview([item.previewUri])"
                /> </van-grid-item
              > </van-grid
            >
          </div>

        </div>

      </div>
       <!-- 处置情况 -->
      <div class="listItem" v-if="status > 0">

        <div class="title">
           <van-icon name="arrow" /> 处置情况 最新反馈时间 {{
            state.detailData?.updateDate
              ? new Date(state.detailData?.updateDate).toLocaleString()
              : '-'
          }}
        </div>
         <template v-if="state.detailData?.workType != 2"
          >
          <div class="list">

            <div class="left">积水开始时间：</div>

            <div class="right">
               {{
                state.detailData?.accumulatedWaterStartTime
                  ? new Date(
                      state.detailData?.accumulatedWaterStartTime,
                    ).toLocaleString()
                  : '-'
              }}
            </div>

          </div>

          <div class="list">

            <div class="left">积水结束时间：</div>

            <div class="right">
               {{
                state.detailData?.accumulatedWaterEndTime
                  ? new Date(
                      state.detailData?.accumulatedWaterEndTime,
                    ).toLocaleString()
                  : '-'
              }}
            </div>

          </div>

          <div class="list">

            <div class="left">停雨时间：</div>

            <div class="right">
               {{
                state.detailData?.cessationRainTime
                  ? new Date(
                      state.detailData?.cessationRainTime,
                    ).toLocaleString()
                  : '-'
              }}
            </div>

          </div>

          <div class="list">

            <div class="left">积水深度：</div>

            <div class="right">
               {{ state.detailData?.accumulatedWaterDepth }} <span
                v-if="state.detailData?.accumulatedWaterDepth"
                >cm</span
              >
            </div>

          </div>

          <div class="list">

            <div class="left">积水面积：</div>

            <div class="right">
               {{ state.detailData?.accumulatedWaterArea }} <span
                v-if="state.detailData?.accumulatedWaterArea"
                >m²</span
              >
            </div>

          </div>

          <div class="list">

            <div class="left">积水时长：</div>

            <div class="right">
               {{ state.detailData?.accumulatedWaterTime }} <span
                v-if="state.detailData?.accumulatedWaterTime"
                >小时</span
              >
            </div>

          </div>

          <div class="list">

            <div class="left">退水时长：</div>

            <div class="right">
               {{ state.detailData?.retreatWaterTime }} <span
                v-if="state.detailData?.retreatWaterTime"
                >小时</span
              >
            </div>

          </div>

          <div class="list">

            <div class="left">是否断交：</div>

            <div class="right">
               {{ state.detailData?.ifDisconnection == 1 ? '是' : '否' }}
            </div>

          </div>

          <div class="list" v-if="state.detailData?.ifDisconnection == 1">

            <div class="left">断交时长：</div>

            <div class="right">
               {{ state.detailData?.disconnectionContent }} <span
                v-if="state.detailData?.disconnectionContent"
                >小时</span
              >
            </div>

          </div>

          <div class="list">

            <div class="left">是否受困：</div>

            <div class="right">
               {{ state.detailData?.ifTrouble == 1 ? '是' : '否' }}
            </div>

          </div>

          <div class="list" v-if="state.detailData?.ifTrouble == 1">

            <div class="left">受困情况：</div>

            <div class="right">
               {{ state.detailData?.predicamentReasons }}
            </div>

          </div>

          <div class="list">

            <div class="left">备注：</div>

            <div class="right">{{ state.detailData?.bz }}</div>

          </div>
           </template
        > <!-- 增援 --> <template v-else
          >
          <div class="list">

            <div class="left">处置描述：</div>

            <div class="right">{{ state.detailData?.dealRemark }}</div>

          </div>
           </template
        >
      </div>
       <!-- 状态 -->
      <div
        class="newList"
        v-if="
          status > 0 && state.list.length > 0 && state.detailData?.workType != 2
        "
      >

        <div class="list" v-for="(item, index) in state.list" :key="index">

          <div class="left"> {{ item[0] }} </div>

          <div class="right" v-if="item[1] == 1">完成</div>

        </div>

      </div>
       <!-- 工单办结 -->
      <div class="listItem" v-if="status > 1">

        <div class="title">
           > 工单办结 办结时间 {{
            state.detailData?.updateDate && status == 3
              ? new Date(state.detailData?.updateDate).toLocaleString()
              : '-'
          }}
        </div>

        <div class="list">

          <div class="left">处置班组：</div>

          <div class="right">{{ state.detailData?.teamName }}</div>

        </div>

        <div class="list">

          <div class="left">班组组长:</div>

          <div class="right">{{ state.detailData?.teamGroupName }}</div>

        </div>

        <div
          class="list"
          style="flex-direction: column; align-items: flex-start"
        >

          <div class="left">处置后照片:</div>

          <div class="right">
             <van-grid :border="false" :column-num="3"
              > <van-grid-item
                v-for="(item, index) in state.detailData?.dispositionPhotos"
                :key="index"
                > <van-image
                  :src="item.previewUri"
                  @click="showImagePreview([item.previewUri])"
                /> </van-grid-item
              > </van-grid
            >
          </div>

        </div>

      </div>

    </div>

    <div class="detailFoot" v-if="status == 0 || status == 1">

      <div style="flex: 1" v-if="status == 0">
         <van-button type="primary" size="small" @click="cardClick('arrive')"
          >确认到场</van-button
        >
      </div>

      <div style="flex: 1" v-if="status == 1">
         <van-button type="success" size="small" @click="cardClick('submit')"
          >提交办结</van-button
        >
      </div>

      <div
        style="margin-left: 30px; flex: 1"
        v-if="status == 1 && state.detailData?.workType != 2"
      >
         <van-button color="#26a2de" size="small" @click="cardClick('feedback')"
          >处置反馈</van-button
        >
      </div>

    </div>

  </div>

</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { showImagePreview } from 'vant'
  import { getWorkDetail } from '@/api/index.js'
  const router = useRouter()
  const route = useRoute()
  const title = '处置工单'
  const status = ref('')
  const state = reactive({
    list: [],
    detailData: {},
  })
  const cardClick = (type: string) => {
    if (type == 'arrive') {
      router.push({
        path: '/arrive',
        query: {
          id: state.detailData.id,
        },
      })
    }
    if (type == 'submit' && state.detailData?.workType == 2) {
      // 增援
      router.push({
        path: '/reinforceCompletedForm',
        query: {
          status: type,
          id: state.detailData.id,
          detailData: JSON.stringify(state.detailData),
        },
      })
    }

    if (type == 'submit' && state.detailData?.workType != 2) {
      router.push({
        path: '/feedback',
        query: {
          status: type,
          id: state.detailData.id,
          eventType: getName(),
          detailData: JSON.stringify(state.detailData),
        },
      })
    }
    if (type == 'feedback') {
      router.push({
        path: '/feedback',
        query: {
          status: type,
          id: state.detailData.id,
          detailData: JSON.stringify(state.detailData),
        },
      })
    }
  }
  const goLine = () => {
    router.push({
      path: '/video',
      // query: {
      //   status: type,
      // },
    })
  }
  const getName = () => {
    let typeName = state.detailData?.type?.split(',') || []
    typeName = typeName.map((item) => {
      switch (item) {
        case '1':
          return '物联网感知'
        case '2':
          return '视频AI'
        case '3':
          return '人工告警'
        case '4':
          return '快处上报'
        default:
          return '-'
      }
    })
    return typeName.join('/')
  }
  const onClickLeft = () => history.back()
  onMounted(async () => {
    await getWorkDetail(route.query.id).then((res) => {
      if (res.status === 200) {
        state.detailData = res.data.data
        status.value = res.data.data.state
        if (res.data.data?.disposalMatter) {
          state.list = Object.entries(res.data.data?.disposalMatter)
        }
      }
    })
  })
</script>

<style scoped lang="less">
  .homeDetail {
  height: 100vh;
  background: #f7f8f7;
}

.homeHeader {
  padding: 10px 10px 0 10px;
  background: #fff;
  display: flex;
}

.homeHeader-left {
  display: flex;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;

  .item {
    margin-right: 5px;
    margin-bottom: 5px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.tabr-nav-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  height: 44px;
  font-size: 18px;
  color: #29292c;
  text-align: center;
  font-style: normal;
  background: #fff;
  width: 100vw;
}

.cardList {
  overflow-y: auto;
  padding: 0 10px;
  margin-bottom: 10px;
  .listItem {
    background: #fff;
    border-radius: 10px;
    padding-bottom: 1px;
    margin-bottom: 10px;
    padding: 10px;

    &:last-child {
      margin-bottom: 0;
    }

    .title {
      border-bottom: 1px solid;
      padding: 10px 0;
      font-size: 14px;
    }

    .list {
      display: flex;
      color: #9b9b9b;
      margin-top: 10px;
      align-items: center;
      .left {
        max-width: 90px;
        white-space: nowrap;
      }

      .right {
        margin-left: 5px;
      }
    }
  }
  .newList {
    background: #fff;
    border-radius: 10px;
    padding-bottom: 1px;
    margin-bottom: 10px;
    padding: 10px;

    .list {
      width: 100%;
      background-color: rgba(242, 242, 242, 1);
      margin-bottom: 5px;
      padding: 8px 10px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:last-child {
        margin-bottom: 0;
      }
      .left {
        color: #333;
        width: calc(100% - 50px);
      }
      .right {
        border: 1px solid #08c33b;
        color: #08c33b;
        background: #fff;
        padding: 5px 10px;
      }
    }
  }
}

.van-button--mini {
  padding: 0 20px !important;
}

.detailFoot {
  width: 100vw;
  padding: 20px;
  background: #fff;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.van-button--small {
  width: 100%;
}
</style>

